<template>
  <div class="login-from">
    <div id="bg-blur"></div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      v-loading="loading"
    >
      <h2>金丰会员管理系统</h2>
      <el-form-item label="账 号:" prop="name">
        <el-input v-model="ruleForm.name" @focus="bgStyle" @blur="bgNone"></el-input>
      </el-form-item>
      <el-form-item label="密  码:" prop="pass">
        <el-input v-model="ruleForm.pass" type="password" @focus="bgStyle" @blur="bgNone"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import loginApi from "@/api/login";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        pass: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" }
        ]
      },
      loading: false
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
            this.loading = true
          setTimeout(()=>{
            this.checkLogin();
          },500)
        } else {
          console.log("error submit!!");
          return false
        }
      });
    },
    async checkLogin() {
      try {
        this.loading = false
        let p = await loginApi.loginIn(this.ruleForm.name, this.ruleForm.pass);
        if (p.data.flag) {
            this.checkToken(p.data.data.token);
        } else {
          this.$message.error("用户名或密码错误");
        }
      } catch (error) {
        console.log(error);
      }
    },
    async checkToken(token) {
      try {
        let p = await loginApi.getUserInf(token);
        if (p.data.flag) {
            this.$message.success('登录成功！');
            this.$router.push('/');
            localStorage.setItem("jinfeng-mms-username",p.data.data.name);
            localStorage.setItem("jinfeng-mms-token",token);

        } else {
            this.$message.error("登录失败！");
        }
      } catch (error) {
        console.log(error);
      }
    },
    bgStyle(){
      let bgBox = document.getElementById('bg-blur');
      let fromBox = document.getElementsByClassName('demo-ruleForm')[0];
      bgBox.style.filter = 'blur(10px)';
      fromBox.style.boxShadow = '0 0 20px rgba(255,255,255,.8)';
      fromBox.style.background = 'rgba(255,255,255,.9)';
    },
    bgNone(){
      let bgBox = document.getElementById('bg-blur');
      bgBox.style.filter = 'none'
      let fromBox = document.getElementsByClassName('demo-ruleForm')[0];
      fromBox.style.boxShadow = '0';
      fromBox.style.background = 'rgba(255,255,255,.7)';
    }
  },
  created() {}
};
</script>

<style scoped>
@import "~@/assets/css/login.css";
</style>